<template>
    <div>
        <mt-header class="plain" title="我的消息" fixed >
            <mt-button slot="left" @click="goBack" icon="back">返回</mt-button>
        </mt-header>
        
        <div class="info-block-list text-left">
            <div class="info-block">

                <mt-loadmore ref="loadMore" :auto-fill="false" :top-method="refresh" :bottom-method="loadMore" @bottom-status-change="handleBottomChange" :bottom-all-loaded="allLoaded">
                    <div class="info-list">
                        <div class="info-item" v-for="item in data.items" :key="item.noticeid">
                            <span class="text">{{item.title}}</span>
                            <span class="time color-gray ml-2">{{item.createtime}}</span>
                        </div>
                    </div>
                    <!-- <div slot="bottom" class="mint-loadmore-bottom">
                        数据加载中 ...
                    </div> -->
                </mt-loadmore>
            </div>
        </div>

    </div>
</template>

<script>
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import userApi from '@/api/user'

export default {
    data() {
        return {
            allLoaded: false,
            // typeMap: {
            //     news: 'NEWS',
            //     publicity: 'PUBLICITY'
            // },

            data: {
                items: []
            },

            pageNo: 0,
            pageSize: 5,
        }
    },


    mounted() {
        this.refresh()
    },

    methods: {
        
        refresh() {
            this.data.items = [];
            this.allLoaded = false;
            this.pageNo = 0;
            this.pageSize = 30;
            this.loadMore(true);
            this.$refs.loadMore.onTopLoaded();
            this.pageSize = 5;
            
        },

        loadMore(onlyOnce) {
            
            userApi.getMyNoticeList({
                params: {
                    // infotype: this.typeMap[this.$route.query.type],
                    pageno: this.pageNo++,
                    pagesize: this.pageSize
                }
            }).then((resp) => {
                const result = resp[Const.RESP_RESULT] || [];

                if (!result || !result[0]) {
                    this.allLoaded = true;
                } else {
                    this.data.items.push(...result)
                }
                if (!onlyOnce) {
                    this.$refs.loadMore.onBottomLoaded();
                }
                
            }).catch((resp) => {
                this.allLoaded = true;
                this.$refs.loadMore.onBottomLoaded();
                if (resp.statusCode == '200') {
                    Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
                }
            });
        },
        
        showInfoDetail(item) {
            let type = this.$route.query.type;
            this.$router.push({path: '/information/detail', query: {id: item.infoid || '', from: 'information-more?type=' + (type || '')}});
        },

        goBack() {
            this.$router.replace({path: '/personal/setting'});
        },

        handleBottomChange(status) {
            // console.log(status)
        }
    }
}
</script>

<style lang="scss" scoped>

$offset-x: 16px;
$scale: 1.2;

.info-block-list {
    padding-top: 55px;
    margin-left: $offset-x;
    margin-right: $offset-x;
    .info-block {
        border-bottom: 1px solid #d2d2d2;
        .info-block-type {
            font-size: 18px * $scale;
        }

        .info-list {
            padding-bottom: 20px;
            .info-item {
                font-size: 14px * $scale;
                line-height: 19px;
                margin-top: 12px;
            
                .time {
                    font-size: 11px * $scale;
                }
            }
        }
    }

    .info-block:last-child {
        border-bottom: none;
    }
}
</style>
